<template>
    <el-container>
        <el-main>

            <!--            <el-row style="margin-bottom: 30px">-->
            <!--                <el-col :span="3">-->
            <!--                    <div class="grid-content bg-purple-dark">总市值:{{formData.总市值}}</div>-->
            <!--                </el-col>-->
            <!--                <el-col :span="3">-->
            <!--                    <div class="grid-content bg-purple-dark">当前盈亏:{{formData.总盈亏}}</div>-->
            <!--                </el-col>-->
            <!--                <el-col :span="3">-->
            <!--                    <div class="grid-content bg-purple-dark">历史盈亏:{{formData.历史盈亏}}</div>-->
            <!--                </el-col>-->
            <!--            </el-row>-->

            <!--            <el-row style="margin-bottom: 30px">-->
            <!--                <el-col>-->
            <!--                    <el-date-picker v-model="tradeDate" type="date" placeholder="日期"></el-date-picker>-->
            <!--                    <el-button style="background: white" @click="selectABC()">查询</el-button>-->
            <!--                </el-col>-->
            <!--                <el-col :span="24">-->
            <!--                    <el-table :data="todayTrade" style="width: 100%" :row-class-name="tableRowClassName">-->
            <!--                        <el-table-column prop="trDate" label="成交时间" width="150"></el-table-column>-->
            <!--                        <el-table-column prop="stName" label="名称" width="80"></el-table-column>-->
            <!--                        <el-table-column prop="stCode" label="代码" width="120"></el-table-column>-->
            <!--                        <el-table-column prop="trPrice" label="成交价" width="120"></el-table-column>-->
            <!--                        <el-table-column prop="trQty" label="成交量" width="100"></el-table-column>-->
            <!--                        <el-table-column prop="trMoney" label="成交额" width="100"></el-table-column>-->
            <!--                    </el-table>-->
            <!--                </el-col>-->
            <!--            </el-row>-->
            <el-row>
                <el-col>
                    <el-col :span="3">
                        <el-input v-model="createUnit.stName" type="text" placeholder="股票名称"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-input v-model="createUnit.stCode" type="text" placeholder="股票代码"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-input v-model="createUnit.trPrice" type="number" placeholder="价格_1.00"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-input v-model="createUnit.trUnit" type="number" placeholder="单位_10000"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-select v-model="createUnit.ruId" clearable :popper-append-to-body="false"
                                   placeholder="规则id">
                            <el-option v-for="item in rules" :key="item.ruName" :label="item.ruName" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="3">
                        <el-button style="background: white" @click="createUnitM">建仓</el-button>
                        <el-button style="background: white" @click="cleanUnitM">清空</el-button>
                    </el-col>

                    <el-col :span="3">
                        <el-input v-model="createUnit.trEarn" type="number" placeholder="earn"></el-input>
                    </el-col>

                </el-col>

                <el-col>
                    <el-table :data="tableData" style="width: 100%"
                              :cell-style="changeCellStyle"
                              :header-cell-style="{background:'#2f677d'}"
                              :row-class-name="tableRowClassName1"
                    >
                        <el-table-column type="expand" label="">
                            <template slot-scope="props">
                                <el-row style="margin-bottom: 8px">
                                    <el-col :span="4">名称: {{props.row.rule.ruName}}</el-col>
                                    <el-col :span="3">跌幅起点: {{props.row.rule.dnPoint}}</el-col>
                                    <el-col :span="3">跌幅起价: {{props.row.rule.dnInit}}</el-col>
                                    <el-col :span="4">跌幅增量: {{props.row.rule.dnAdd}}</el-col>
                                    <el-col :span="3">涨幅起点: {{props.row.rule.dnPoint}}</el-col>
                                    <el-col :span="3">涨幅起价: {{props.row.rule.dnInit}}</el-col>
                                    <el-col :span="3">涨幅增量: {{props.row.rule.dnAdd}}</el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="2" v-for="item in props.row.rule.upDnCalcList"
                                            v-bind:key="item.trStep">
                                        <el-row>
                                            <el-col style="background-color: #e7eaed;font-size: larger">
                                                {{item.trStep}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col style="background-color: #fe5c57">{{item.upPercent?
                                                item.upPercent+'%':'null'}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col style="background-color: #00d800">{{item.dnPercent?
                                                -item.dnPercent+'%':'null'}}
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="序号" width="80">
                            <template slot-scope="scope">
                                <el-row> {{ scope.$index+1 }}</el-row>
                                <!--                                <el-row> {{ scope.row.stCode }}</el-row>-->
                            </template>
                        </el-table-column>
                        <el-table-column label="代码" width="80">
                            <template slot-scope="scope">
                                <el-row> {{ scope.row.stName }}</el-row>
                                <el-row> {{ scope.row.stCode }}</el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="成本/现价" width="120">
                            <template slot-scope="scope">
                                <el-row> {{ scope.row.stPrice }}</el-row>
                                <el-row> {{ scope.row.trPrice }}</el-row>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stQty" label="持仓" width="100">

                        </el-table-column>
                        <el-table-column label="市值/盈亏" width="150">
                            <template slot-scope="scope">
                                <el-row> {{ scope.row.stMoney }}</el-row>
                                <el-row> {{ scope.row.stProfit }}</el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="阶梯/单位" width="100">
                            <template slot-scope="scope">
                                <el-row> {{ scope.row.trStep }}/{{ scope.row.trUnit }}</el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="涨.价格/数量" width="120">
                            <template slot-scope="scope">
                                <el-row> {{ scope.row.upVo.trPrice }}</el-row>
                                <el-row> {{ scope.row.upVo.trQty }}</el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="跌.价格/数量" width="120">
                            <template slot-scope="scope">
                                <el-row> {{ scope.row.dnVo.trPrice }}</el-row>
                                <el-row> {{ scope.row.dnVo.trQty }}</el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="涨.幅度/盈亏" width="120">
                            <template slot-scope="scope">
                                <el-row> {{ scope.row.upVo.upPercent }}</el-row>
                                <el-row> {{ scope.row.upVo.upMoney }}</el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="跌.幅度/盈亏" width="120">
                            <template slot-scope="scope">
                                <el-row> {{ scope.row.dnVo.dnPercent }}</el-row>
                                <el-row> {{ scope.row.dnVo.dnMoney }}</el-row>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-button size="small" style="background: red" @click="up(scope.row)">涨</el-button>
                                    <el-button size="small" style="background: #7cd07c" @click="down(scope.row)">跌
                                    </el-button>
                                    <el-button size="small" style="background: #c2e287" @click="deleteUnit(scope.row)">
                                        删
                                    </el-button>
                                    <el-button size="small" style="background: #f5f0b7" @click="clearMark(scope.row)">
                                        清除标记
                                    </el-button>
                                </el-row>
                                <el-row>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-main>
    </el-container>

</template>

<script>
    export default {
        components: {},

        data() {
            return {
                tableData: [],
                formData: {
                    总市值: 123.0,
                    总盈亏: -100.0,
                    历史盈亏: 1000
                },
                todayTrade:
                    [],
                tradeDate: '',
                createUnit: {
                    trEarn: ''
                },
                rules: []
            };
        },
        beforeMount() {
            this.list();
            this.listRule();
            this.tradeDate = new Date();
        },
        mount() {
            // console.log(this.data().tradeDate)
        },
        watch: {},
        methods: {
            selectABC() {

            },
            createUnitM() {
                this.$postData("/unit/create", this.createUnit).then((res) => {
                    this.$message.success(res);
                    this.createUnit = {}
                    this.list();
                });
            },
            cleanUnitM() {
                this.createUnit = {}
            },
            //列表数据
            list() {
                this.$get("/unit/list", {}).then((res) => {
                    this.tableData = res;
                    this.createUnit = {};
                });
            },
            //列表数据
            listRule() {
                this.$get("/rule/list", {}).then((res) => {
                    this.rules = res;
                });
            },
            changeCellStyle(row) {
                if (row.column.label.toString().startsWith('涨.')) {
                    return 'color:pink'
                } else if (row.column.label.toString().startsWith('跌.')) {
                    return 'color:blue'
                } else {
                    return ''
                }
            },
            tableRowClassName(row) {
                if (row.row.trOperate > 0) {
                    return 'warning-row';
                } else if (row.row.trOperate < 0) {
                    return 'success-row';
                    // return '';
                }
                return '';
            },
            tableRowClassName1(row) {
                if (row.row.mark > 0) {
                    return 'warning-row';
                }
                // else if (row.row.trOperate < 0) {
                //     return 'success-row';
                //     // return '';
                // }
                return '';
            },
            up(row) {
                this.$confirm("涨？确认!", "上涨了", {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$post("/unit/up-sale?id=" + row.id, {}).then((res) => {
                            this.$message.success(res);
                            //刷新表格
                            this.list();
                        });
                    })
                    .catch(() => {

                    });
            },
            down(row) {
                this.$confirm("跌？确认!", "下跌了", {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$post("/unit/down-buy?id=" + row.id, {}).then((res) => {
                            this.$message.success(res);
                            //刷新表格
                            this.list();
                        });
                    })
                    .catch(() => {

                    });
            },
            deleteUnit(row) {
                this.$confirm("删除？确认!", "删除" + row.stName, {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$post("/unit/delete?id=" + row.id + "&trEarn=" + this.createUnit.trEarn, {}).then((res) => {
                            this.$message.success(res);
                            //刷新表格
                            this.list();
                            this.createUnit.trEarn = '';
                        });
                    })
                    .catch(() => {

                    });
            },

            clearMark(row) {
                this.$confirm("清除标记？确认!", "清除标记" + row.stName, {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$post("/unit/clearMark?id=" + row.id, {}).then((res) => {
                            this.$message.success(res);
                            //刷新表格
                            this.list();
                        });
                    })
                    .catch(() => {

                    });
            }
        }
    };
</script>


<style>
    .el-table .warning-row {
        background: #f5f0b7;
    }

    .el-table .success-row {
        background: #57ff38;
    }
</style>

<style lang='scss' scoped>

    .grid-content {
        border-radius: 0px;
        min-height: 50px;
        font-size: 20px;
        font-family: 粗体;
    }

    .bg-purple-dark {
        background: rgba(255, 255, 255, 0.2);
    }

</style>

